<!--表格弹窗组件-->
<template>
  <AntModal :title="modalTitle" ref="modal" @closeModal="closeModal">
    <template slot="footer">
      <AntButton icon="close" @click="winCancel" type="default">关闭</AntButton>
      <AntButton icon="save" @click="mainSave" v-show="saveFlag">确定</AntButton>
    </template>
    <AntSpin ref="cspin">
      <AntCard>
        <AntContainer>
          <template slot="top">
            <!--顶部查询条件区域插槽-->
            <AntForm ref="conditionForm">
              <AntHeaderToolbar :conditionVisible="conditionVisible" :bottomVisible="false">
                <slot></slot>
                <template slot="customButton">
                  <AntButton @click="mainSearch" icon="search">查询</AntButton>
                </template>
              </AntHeaderToolbar>
            </AntForm>
          </template>
          <template slot="bottom">
            <AntRow style="margin:0px;">
              <!--左侧查询条件区域插槽-->
              <AntCol v-if="leftCondition" :span="leftColSpan">
                <!--标题顶部区域-->
                <div ref="leftTableTop" v-show="leftTableTop&&leftTableTop.show" class="table-top-title" :style="leftTableTop?leftTableTop.style:null">
                  {{ leftTableTop?leftTableTop.title:'' }}
                </div>
                <slot name="leftCondition"></slot>
              </AntCol>
              <AntCol :span="leftCondition?24-leftColSpan:24">
                <!--自定义区域插槽-->
                <div v-if="tableTop" class="c-table-top">
                  <slot name="tableTop"></slot>
                </div>
                <!--表格-->
                <div :style="getTableStyle">
                  <AntTable
                    :autoCalcVisible="false"
                    ref="mainTable"
                    :url="url"
                    :rowKey="rowKey"
                    :autoLoad="false"
                    :selectable="selectable"
                    :table-title="tableTitle"
                    :tableHeight="tableHeight"
                    :pageable="pageable"
                  ></AntTable>
                </div>
              </AntCol>
            </AntRow>
          </template>
        </AntContainer>
      </AntCard>
    </AntSpin>
  </AntModal>
</template>

<script>
export default {
  name: 'AntModalTable',
  props: {
    /**
     * 弹出框标题
     */
    modalTitle: {
      type: String,
      default: '弹出框'
    },
    /**
     * 表格字段信息
     */
    tableTitle: {
      type: Array,
      default: () => []
    },
    /**
     * 表格url
     */
    url: {
      type: String,
      default: ''
    },
    /**
     * 表格数据主键字段，必须唯一，必须在tableTitle中存在字段
     */
    rowKey: {
      type: String,
      default: null
    },
    /**
     * 表格数据是否可多选
     */
    selectable: {
      type: Boolean,
      default: false
    },
    /**
     * 表格是否分页
     */
    pageable: {
      type: Boolean,
      default: true
    },
    /**
     * 表格宽度
     */
    tableWidth: {
      type: String,
      default: ''
    },
    /**
     * 顶部条件区是否显示
     */
    conditionVisible: {
      type: Boolean,
      default: true
    },
    /**
     * 除插槽中的查询条件外，额外的自定义表格查询条件
     */
    params: {
      type: Object,
      default: () => {}
    },
    /**
     * 是否显示左侧条件框区域
     */
    leftCondition: {
      type: Boolean,
      default: false
    },
    /**
     * 左侧查询条件区域顶部标题是否显示，依赖leftCondition必须是true
     */
    leftTableTop: {
      show: false,
      title: '',
      style: ''
    },
    /**
     * 左侧条件框列所占比例，占满为24
     */
    leftColSpan: {
      type: Number,
      default: 6
    },
    /**
     * 获取左侧条件栏自定义参数，若return null/false，则阻止mainSearch()后续查询操作，返回对象会将其值放入mainSearch查询条件中
     */
    leftConditionFunc: {
      type: Function,
      default: () => {}
    },
    /**
     * 是否显示表格头部区域自定义区域
     */
    tableTop: {
      type: Boolean,
      default: false
    },
    /**
     * 是否开启保存按钮
     */
    saveFlag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 表格单元格高度
      tableTdHeight: 40,
      // 表格分页条高度
      tablePaginationHeight: 32,
      // 表格最小高度 - 默认240
      tableMinHeight: 240,
      // 表格高度 - 默认最小高度240
      tableHeight: 240,
      // 弹出框 - 底部距离
      modalBottomHeight: 150
    }
  },
  computed: {
    /**
     * 生成表格样式
     * @returns {{}}
     */
    getTableStyle() {
      const obj = { }
      if (this.tableWidth !== '') {
        obj.width = this.tableWidth + 'px;'
      } else {
        obj.minWidth = '400px;'
      }
      return obj
    }
  },
  methods: {
    /**
     * 重置表格高度
     */
    resetTableHeight() {
      // 1.获取表格区域可视的最大高度
      const tableRect = this.$refs.mainTable.$el.getBoundingClientRect()
      let tableHeight = document.body.clientHeight - tableRect.top - this.modalBottomHeight - (this.tableTdHeight + this.tableTdHeight + (this.pageable ? this.tablePaginationHeight : 0))
      // 2.根据表格加载数据判定
      const tableDataMaxHeight = this.$refs.mainTable.getTableData().length * this.tableTdHeight
      // 3.页面可视区域 同 表格内容高度比较 - 保证内容正常显示
      tableHeight = tableHeight > tableDataMaxHeight ? tableDataMaxHeight : tableHeight
      // 4.页面可视区域高度是否触发最小范围
      tableHeight = tableHeight > this.tableMinHeight ? tableHeight : this.tableMinHeight
      this.tableHeight = tableHeight
    },
    /**
     * 主查询
     */
    mainSearch() {
      // 左侧条件栏 自定义 函数对象
      const conditionParam = this.leftCondition ? this.leftConditionFunc() : {}
      if (!conditionParam) {
        return
      }
      this.$nextTick(() => {
        this.$refs.cspin.show()
        let that = this
        // 查询前回调 - 用于条件区域设置初始值
        this.$emit('beforeMainSearchCallback', this)
        let obj = this.$refs.conditionForm.getFieldsValue()
        that.$refs.mainTable.load({ ...obj, ...this.params, ...conditionParam }, function() {
          that.resetTableHeight() // 重新计算表格高度
          that.$refs.cspin.hide()
          that.$emit('loadingCompleted', that.$refs.mainTable.getTableData())
        })
      })
    },
    /**
     * 弹出框展示 notAutoLoad:是否不执行默认加载数据操作（默认false，执行查询操作；阻止为true）
     * @param notAutoLoad
     */
    showModal(notAutoLoad) {
      if (!this.url || this.url.length === 0) {
        this.$message.warning('请传入表格url地址')
        return
      }
      this.$refs.modal.setVisible(true)
      if (!notAutoLoad) {
        this.mainSearch()
      }
    },
    /**
     * 弹出框隐藏
     */
    winCancel() {
      this.$refs.modal.setVisible(false)
    },
    /**
     * 确定
     */
    mainSave() {
      if (this.selectable) {
        const rows = this.$refs.mainTable.getSelected()
        if (rows.length === 0) {
          this.$message.warning('请选择数据')
          return
        }
        this.$emit('selectData', rows)
      } else {
        const currentRow = this.$refs.mainTable.currentRow
        if (!currentRow) {
          this.$message.warning('请选择数据')
          return
        }
        this.$emit('selectData', [{ ...currentRow }])
      }
      this.winCancel()
    },
    /**
     * 设置查询条件区域的字段值
     * @param values
     */
    setConditionFormFieldsValue(values) {
      this.$refs.conditionForm.setFieldsValue(values)
    },
    /**
     * 设置表格中已选中数据
     * @param keyArr 主键值
     * @param key 主键字段名称，这个值一定要在rowKey中传入
     * @param status 是否选中
     * @param type 主键值类型，一般不传入,可以传Number
     */
    setTableCheckBoxByPrimaryKey(keyArr, key, status, type) {
      this.$nextTick(() => {
        this.$refs.mainTable.setCheckBoxByPrimaryKey(keyArr, key, status, type)
      })
    },
    /**
     * 弹窗关闭
     */
    closeModal() {
      this.$emit('closeModal')
    }
  }
}
</script>

<style lang="less" scoped>
.table-top-title{
  padding:3px 5px;
  margin-right:8px;
  background: #e3e3e3;
  line-height: 32px;
  height: 38px;
  font-size: 16px;
}
.c-table-top{
  padding: 3px 5px;
  background: #e3e3e3;
  line-height: 32px;
  height: 38px;
  font-size: 16px;
}
</style>
